<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录页</title>
    <script type="text/javascript" src="./js/jquery-1.12.4.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
        }

        body {
            background-color: #0d1117;
            color: #c9d1d9;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            padding: 20px;
            background-image:
                    radial-gradient(circle at 10% 20%, rgba(33, 38, 45, 0.5) 0%, transparent 20%),
                    radial-gradient(circle at 80% 80%, rgba(33, 38, 45, 0.5) 0%, transparent 20%);
        }

        .container {
            width: 100%;
            max-width: 340px;
            text-align: center;
        }

        .logo {
            margin-bottom: 30px;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 10px;
        }

        .logo-icon {
            font-size: 48px;
            color: #f0f6fc;
        }

        .logo-text {
            font-size: 32px;
            font-weight: 300;
            letter-spacing: -1px;
            color: #f0f6fc;
        }

        .card {
            background-color: #161b22;
            border: 1px solid #30363d;
            border-radius: 8px;
            padding: 24px;
            box-shadow: 0 8px 24px rgba(1, 4, 9, 0.5);
        }

        .card-header {
            margin-bottom: 20px;
        }

        .card-header h1 {
            font-size: 24px;
            font-weight: 300;
            color: #f0f6fc;
            margin-bottom: 4px;
        }

        .card-header p {
            font-size: 14px;
            color: #8b949e;
        }

        .form-group {
            margin-bottom: 16px;
            text-align: left;
        }

        label {
            display: block;
            margin-bottom: 8px;
            font-size: 14px;
            font-weight: 500;
            color: #c9d1d9;
        }

        input {
            width: 100%;
            padding: 8px 12px;
            background-color: #0d1117;
            border: 1px solid #30363d;
            border-radius: 6px;
            color: #c9d1d9;
            font-size: 14px;
            transition: border-color 0.2s, box-shadow 0.2s;
        }

        input:focus {
            outline: none;
            border-color: #58a6ff;
            box-shadow: 0 0 0 3px rgba(17, 88, 199, 0.3);
        }

        .password-container {
            position: relative;
        }

        .toggle-password {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            color: #8b949e;
            cursor: pointer;
        }

        .forgot-password {
            display: block;
            text-align: right;
            font-size: 12px;
            margin-top: 4px;
            color: #58a6ff;
            text-decoration: none;
        }

        .forgot-password:hover {
            text-decoration: underline;
        }

        .btn {
            width: 100%;
            padding: 8px 16px;
            border: none;
            border-radius: 6px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: background-color 0.2s;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 8px;
        }

        .btn-primary {
            background-color: #238636;
            color: #fff;
        }

        .btn-primary:hover {
            background-color: #2ea043;
        }

        .divider {
            position: relative;
            margin: 24px 0;
            height: 1px;
            background-color: #30363d;
        }

        .divider-text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: #161b22;
            padding: 0 8px;
            font-size: 12px;
            color: #8b949e;
        }

        .social-login {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .btn-google {
            background-color: #ffffff;
            color: #202124;
            border: 1px solid #30363d;
        }

        .btn-google:hover {
            background-color: #f8f9fa;
        }

        .btn-facebook {
            background-color: #1877f2;
            color: #fff;
        }

        .btn-facebook:hover {
            background-color: #166fe5;
        }

        .btn-twitter {
            background-color: #1d9bf0;
            color: #fff;
        }

        .btn-twitter:hover {
            background-color: #1a8cd8;
        }

        .create-account {
            margin-top: 24px;
            padding: 16px;
            border: 1px solid #30363d;
            border-radius: 8px;
            font-size: 14px;
        }

        .create-account a {
            color: #58a6ff;
            text-decoration: none;
        }

        .create-account a:hover {
            text-decoration: underline;
        }

        .footer {
            margin-top: 40px;
            font-size: 12px;
            color: #8b949e;
        }

        .footer-links {
            display: flex;
            justify-content: center;
            gap: 16px;
            margin-top: 8px;
        }

        .footer-links a {
            color: #58a6ff;
            text-decoration: none;
        }

        .footer-links a:hover {
            text-decoration: underline;
        }

        @media (max-width: 480px) {
            .card {
                padding: 20px;
            }

            .logo-text {
                font-size: 28px;
            }

            .logo-icon {
                font-size: 40px;
            }
        }
    </style>
</head>
<body>
<div class="container">
    <div class="logo">
        <i class="fab fa-github logo-icon"></i>
        <span class="logo-text">AliCloud</span>
    </div>

    <div class="card">
        <div class="card-header">
            <h1>登录到AliCloud</h1>
            <p>使用您的AliCloud账号或第三方服务登录</p>
        </div>

        <!--<form id="loginForm">-->
            <div class="form-group">
                <!--<label for="username">用户名或邮箱地址</label>-->
                <label for="username">用户名</label>
                <input type="text" id="username" name="username" required autocomplete="username">
            </div>

            <div class="form-group">
                <label for="password">密码</label>
                <div class="password-container">
                    <input type="password" id="password" name="password" required autocomplete="current-password">
                    <button type="button" class="toggle-password" id="togglePassword">
                        <i class="far fa-eye"></i>
                    </button>
                </div>
                <a href="#" class="forgot-password">忘记密码?</a>
            </div>

            <button type="submit" class="btn btn-primary" onclick="toLogin()">
                登录
            </button>
        <!--</form>-->

        <div class="divider">
            <span class="divider-text">或使用第三方登录</span>
        </div>

        <div class="social-login">
            <button type="button" class="btn btn-google">
                <i class="fab fa-google"></i>
                使用AliAuth账号登录
            </button>

            <!--<button type="button" class="btn btn-facebook">
                <i class="fab fa-facebook"></i>
                使用Facebook账号登录
            </button>

            <button type="button" class="btn btn-twitter">
                <i class="fab fa-twitter"></i>
                使用Twitter账号登录
            </button>-->
        </div>
    </div>

    <div class="create-account">
        新用户? <a href="#">创建账号</a>
    </div>

    <div class="footer">
        <p>© 2023 GitHub, Inc.</p>
        <div class="footer-links">
            <a href="#">条款</a>
            <a href="#">隐私</a>
            <a href="#">安全</a>
            <a href="#">联系GitHub</a>
        </div>
    </div>
</div>

<script>
    // 密码显示/隐藏切换
    document.getElementById('togglePassword').addEventListener('click', function() {
        const passwordInput = document.getElementById('password');
        const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
        passwordInput.setAttribute('type', type);

        this.innerHTML = type === 'password' ? '<i class="far fa-eye"></i>' : '<i class="far fa-eye-slash"></i>';
    });

    // 表单提交处理
    // document.getElementById('loginForm').addEventListener('submit', function(e) {
    //     e.preventDefault();

    function toLogin() {
        const username = document.getElementById('username').value;
        const password = document.getElementById('password').value;

        /*let data = {
            username: username,
            password: password
        };*/

        let data = {
            "username": username,
            "password": password
        };

        debugger;
        $.ajax({
            type: "post",
            url: "/base/user/login",
            contentType: "application/json;charset=UTF-8",
            dataType: 'json',
            data: JSON.stringify(data),
            success(data) {
                if (data.code === 10000) {
                    window.location.href = "http://localhost:9092/base/index.html";
                } else {
                    document.write('出错了，' + data.message);
                }
            },
            error(e) {
                console.log('登录失败:' + e);
            }
        });
        console.log('登录信息:', {username, password});
    }

    // });

    // 第三方登录按钮事件
    document.querySelectorAll('.social-login .btn').forEach(button => {
        button.addEventListener('click', function() {
            // const service = this.textContent.trim().replace('使用', '').replace('账号登录', '');
            // alert(`正在跳转到${service}登录...`);

            let authUrl = "http://localhost:9094/auth/thirdLogin";
            // 重定向到授权页
            window.location.href = authUrl;
        });
    });
</script>
</body>
</html>
